<template>
  <div class="app-container">
    <h3>医院设置列表</h3>
    <!-- 查询框   -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="医院名称">
        <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getHospSetList()" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <!-- 批量删除   -->
        <el-button type="danger" @click="batchRemoveHospSet" icon="el-icon-delete">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 展示列表   -->
    <el-table :data="hospSetList" v-loading="listLoading" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="hosname" label="医院名称" width="320" align="center"></el-table-column>
      <el-table-column prop="hoscode" label="医院编号" align="center"></el-table-column>
      <el-table-column prop="apiUrl" label="api 基础路径" width="230" align="center"></el-table-column>
      <el-table-column prop="contactsName" label="联系人姓名" align="center"></el-table-column>
      <el-table-column prop="contactsPhone" label="联系人手机" align="center"></el-table-column>
      <el-table-column label="状态" width="70" align="center">
        <template slot-scope="scope">
          <span style="color:green" v-if="scope.row.status === 1">可用</span>
          <span style="color:red" v-if="scope.row.status === 0">不可用</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button @click="removeHospSetById(scope.row.id)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
          <el-button @click="lockHospitalSet(scope.row.id, 0, scope.row.hosname)" type="warning" icon="el-icon-lock" size="small" v-if="scope.row.status === 1">锁定</el-button>
          <el-button @click="lockHospitalSet(scope.row.id, 1, scope.row.hosname)" type="primary" icon="el-icon-unlock" size="small" v-if="scope.row.status === 0">解锁</el-button>
          <router-link :to="'/hospSet/edit/'+scope.row.id">
            <el-button type="info" icon="el-icon-edit-outline" size="small">修改</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="getHospSetList"
      @size-change="changeSize"
      background
      :current-page="current"
      :page-size="limit"
      :page-sizes="[5,10,20,30,40,50,100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="padding-top: 27px;">
    </el-pagination>
  </div>  
</template>

<script>
// 引入接口
import hospSet from '../../api/hospset'
export default {
  name: 'list',
  data() {
    return {
      current: 1,// 当前页
      limit: 7,// 每页显示数
      searchObj: {},// 条件封装对象
      hospSetList: [],// 每页数据集合
      total: 0,// 总记录数
      idList: [],// id 列表
      listLoading: true// // 数据是否正在加载
    }
  },
  created() {
    // 页面渲染之前执行，调用 methods 定义的方法，得到数据
    this.getHospSetList();
  },
  methods: {
    // 定义方法，进行接口调用
    // 1、医院设置列表
    getHospSetList(page = 1) {
      this.current = page;
      hospSet.getHospSetList(this.current, this.limit, this.searchObj).then(
        // 成功
        response => {
          // 医院列表
          this.hospSetList = response.data.records;
          // 总记录数
          this.total = response.data.total;
          // console.log(response.data.records)
          this.listLoading = false;
        }
      ).catch(
        // 失败
        error => {
          console.log(error)
        }
      )
    },

    // 2、删除医院设置
    removeHospSetById(id) {
        this.$confirm('此操作将删除医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用接口方法
          hospSet.removeHospSetById(id).then(
            response => {
              // 提示信息
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              // 刷新页面
              this.getHospSetList(this.current);
            }
          ).catch(
            errors => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

    },

    // 3、获取选择的复选框的 id 值
    handleSelectionChange(selection) {
      // console.log(selection);
      this.idList = [];
      for(let j = 0; j < selection.length; j++) {
        this.idList.push(selection[j].id);
      }
      // console.log(this.idList);
    },

    // 4、批量删除医院设置
    batchRemoveHospSet() {
      if (this.idList.length === 0) {
        this.$message({
          message: '请选择要删除的医院设置信息',
          type: 'warning'
        });
        return;
      }
      this.$confirm('此操作将删除所有选择的医院设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口方法
        hospSet.batchRemoveHospSet(this.idList).then(
          response => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // 刷新页面
            this.getHospSetList(this.current);
          }
        ).catch(
          errors => {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 5、锁定和取消锁定
    lockHospitalSet(id, status, hosname) {
      hospSet.lockHospitalSet(id, status).then(
        response => {
          // 提示
          this.$message({
            type: 'success',
            message: '修改成功, '+hosname+(status === 1 ? ' 已解锁!' : ' 已锁定!')
          });
          // 刷新列表
          this.getHospSetList(this.current);
        }
      ).catch(
        error => {
          // 提示
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }
      )
    },

    // 6、改变一页显示的数据数
    changeSize(size) {
      this.limit = size;
      this.getHospSetList(1);
    }
  }
}
</script>

<style scoped>
  div {
    margin-left: 20px;
  }
</style>
